<?php get_instance()->view('common/header');?>
<link rel="stylesheet" href="<?php echo $this->staticUrl?>css/jquery-weui.css">
<style>
	.saixuan{background:#fff;}
	.discount{display:block;float:left;}
	.discount img{width:100%;margin-top:1px;}
	.conentbox{display:block;}
	.conentbox .pr{float:left;}
	.conentbox .model{padding-left:5.75em;}
	.conentbox:after{clear:both;content:'';display:block;}
	.juli{top:1.25em;display:block;text-align:right;}
	.juli .shu{height:0.25em;}
	.banner{margin-bottom:0.5em;}
</style>
<body>
<div class="saixuan">
    <a href="javascript:;" class="sort actived" data-id="2">综合排序</a>
    <a href="javascript:;" class="sort " data-id="1">距离最近</a>
    <a href="javascript:;" class="sort" data-id="3">评分最高</a>

    <a href="javascript:;">
        <div class="b0" id="category" value="<?php echo $categoryInfo['cat_name']?>" data-values="<?php echo $categoryInfo['id']?>">
            <?php echo isset($categoryInfo['cat_name']) ? $categoryInfo['cat_name'] : '分类筛选'?>
        </div>
<!--        <img class="jiantou" src="--><?php //echo $this->staticUrl?><!--img/png/pic9.png">-->
    </a>
    <div class="after"></div>
</div>
<div class="waper">
    <div class="list">
        <?php if (!empty($list)):?>
            <?php foreach ($list as $k => $v):?>
                <div class="conentbox hengleft merchant" data-id="<?php echo $v['id']?>">
                    <div class="imgbox mr10 pr">
                        <img src="<?php echo $v['headurl']['xs']?>" alt="">
                        <?php if ($v['business'] == 1):?>
                            <img class="pos xi" src="<?php echo $this->staticUrl?>img/png/pic143.png" alt="">
                        <?php endif;?>
                    </div>
                    <div class="model">
                        <div class="hengleft vCenter"><p class="mr5 lh10 f09 fb"><?php echo $v['shop_name']?></p></div>
                        <div class="hengleft f08 mt5 mb5 vCenter">
                            <div class="xing hengleft vCenter">
                                <?php for ($i = 0; $i < $v['score']; $i++):?>
                                    <img src="<?php echo $this->staticUrl?>img/png/pic11.png" alt="">
                                <?php endfor; $score = 5-$v['score']; for ($j = 0; $j < $score; $j++):?>
                                    <img src="<?php echo $this->staticUrl?>img/png/pic12.png" alt="">
                                <?php endfor;?>
<!--                                <span class="hongzi f09">--><?php //echo $v['score']?><!--</span>-->
                            </div>
                            <span class="shu"></span>
                            <span class="f08">月售<?php echo $v['month_total']?>单</span>

                        </div>
                        <?php  if(!empty($v['business_desc'])): ?>
                            <span class="f06" style="background-color: #0c91e5;color: white;padding: 0.1em 0.5em;"><?php echo $v['business_desc'] ?></span>
                        <?php  endif; ?>
                        <?php if (!empty($v['note'])): foreach ($v['note'] as $kk => $vv):?>
                            <div class="hengleft vCenter f085">
                                <span class="discount"><img src="<?php echo $vv['icon']?>" alt=""></span>
                                <p class="f08 cor8 textEll"><?php echo $vv['text']?></p>
                            </div>
                        <?php endforeach; endif;?>
                    </div>
                    <p class="cor9 juli vCenter"><?php if ($v['distance'] >= 1000){ $d = $v['distance']/1000; echo $d.'km';}else{ echo $v['distance'].'m';}?><span class="dk shu"></span>
                    预计<?php echo $v['expect_arrive_time']?>分钟</p>
                </div>
            <?php endforeach;?>
        <?php else:?>
            <div class="statebox chuizhi jdjz" style="flex: 1;height: 100%;">
                <img class="stateimgda mb5" src="<?php echo $this->staticUrl?>img/default/2.png" alt="">
                <span class="f09 cor9 tc mb20">暂无数据</span>
            </div>
        <?php endif;?>
    </div>
    <div class="weui-loadmore" style="display: none">
        <div class="load">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
        <span class="noC" style="display: none">没有更多内容了~</span>
    </div>
</div>
<div class="mask"></div>
</body>
<script src="<?php echo $this->staticUrl?>js/jquery-weui.js"></script>
<script src="<?php echo $this->staticUrl?>js/base.js"></script>
<script type="text/javascript">
    $(function () {
        var page = 1,
            sort = 1,
            category_id = "<?php echo $categoryInfo['id']?>",
            html,
            l = "<?php echo $this->staticUrl?>img/png/pic11.png", // 星级 - 亮
            a = "<?php echo $this->staticUrl?>img/png/pic12.png", // 星级 - 暗
            d = "<?php echo $this->staticUrl?>img/default/2.png"; // 缺省图
        /**
         * 排序
         */
        $(".sort").click(function () {
            sort = $(this).attr('data-id');
            page = 1;
            blockUI.show('加载中...');
            $(".sort").removeClass('actived');
            $(this).addClass('actived');
            var weiz = $(".saixuan a.actived").index();
            var wid = $(".saixuan a").width();
            $(".saixuan .after").animate({left:weiz*wid});
            getList(0);
        });

        /**
         * 点击分类
         * [{title: "iPhone 3GS",value: "001",}]
         */
        $("#category").select({
            title: "选择分类",
            items: <?php echo $category?>,
            onClose:function () {
                category_id = $("#category").attr('data-values');
                if (category_id == undefined){
                    return;
                }
                var cat = $("#category").attr('value');
                $("#category").html(cat);
                page = 1;
                blockUI.show('加载中...');
                getList(0);
            }
        });

        /**
         * 上拉加载
         */
        var loading = false;  //状态标记
        $(document.body).infinite().on("infinite", function() {
            if(loading) return;
            loading = true;
            $(".weui-loadmore").show();
            $(".load").show();
            $(".noC").hide();
            // $(document.body).destroyInfinite() // 销毁插件
            // $(document.body).infinite() // 重新初始化
            page += 1;
            getList(1)
        });

        function getList(t) {
            var xi = "<?php echo $this->staticUrl?>img/png/pic143.png";
            $.ajax('<?php echo getUrl('home/getShopList');?>', {
                type:'post',
                data:{page:page,category_id:category_id,sort:sort},
                dataType:'json',
                error:function(){
                    blockUI.hide();
                    show_message({status:0, message:'请求超时'});
                },
                timeout:60000,
                success:function(e,textStatus,jqXHR){
                    blockUI.hide();
                    loading = false;
                    if (e.status != 1){
                        show_message(e);
                        return;
                    }

                    if (t == 1){
                        if (!e.data.length){
                            $(document.body).destroyInfinite();
                            $(".load").hide();
                            $(".noC").show();
                            return;
                        }
                    }else{
                        if (!e.data.length){
                            $(".weui-loadmore").hide();
                            $(".list").html('<div class="statebox chuizhi jdjz" style="flex: 1;height: 100%;">' +
                                '<img class="stateimgda mb5" src="'+d+'" alt="">' +
                                '<span class="f09 cor9 tc mb20">暂无数据</span></div>');
                            return;
                        }else{
                            $(".list").html('');
                        }
                    }

                    $(".weui-loadmore").hide();
                    html = '';
                    $.each(e.data, function (key, obj) {
                        var score = '',
                            s = 5 - obj.score,
                            note = '',
                            distance = obj.distance+'m',
                            xiImg = '';
                        for (var i = 0; i < obj.score; i++){
                            score += '<img src="'+l+'" alt="">';
                        }
                        if (s > 0){
                            for (var j = 0; j < s; j++){
                                score += '<img src="'+a+'" alt="">';
                            }
                        }

                        if ($.inArray("note", obj) > -1){
                            $.each(obj.note, function (k, v) {
                                note +=
                                    '<div class="hengleft vCenter f085">' +
                                    '   <span class="discount"><img src="'+v.icon+'" alt=""></span>' +
                                    '   <p class="f08 cor8">'+v.text+'</p>' +
                                    '</div>';
                            })
                        }
                        if (obj.distance >= 1000){
                            distance = obj.distance/1000;
                            distance = distance + 'km'
                        }
                        if (obj.business == 1){
                            xiImg = '<img class="pos xi" src="'+xi+'" alt="">'
                        }
                        var business_desc ="";
                        if(obj.business_desc!=""){
                            business_desc='<span class="f06" style="background-color: #0c91e5;color: white;padding: 0.1em 0.5em;">'+obj.business_desc+'</span>'
                        }
                        html =
                            '<div class="conentbox hengleft merchant" data-id="'+obj.id+'">' +
                            '   <div class="imgbox mr10 pr"><img src="'+obj.headurl.xs+'" alt="">'+xiImg+'</div>' +
                            '   <div class="model">' +
                            '       <div class="hengleft vCenter"><p class="mr5 lh10 f09 fb">'+obj.shop_name+'</p></div>' +
                            '       <div class="hengleft f08 mt5 mb5 vCenter">' +
                            '           <div class="xing hengleft vCenter">'+score+
//                            '               <span class="hongzi f09">'+obj.score+'</span>' +
                            '           </div>' +
                            '           <span class="shu"></span>' +
                            '           <span class="f08">月售'+obj.month_total+'单</span>' +
                            '       </div>'+business_desc+note+
                            '   </div>' +
                            '   <p class="cor9 juli vCenter">'+obj.expect_arrive_time +
                            '       分钟<span class="dk shu"></span>'+distance+'</p>' +
                            '</div>';
                        $(".list").append(html);
                    });
                }
            });
        }

        /**
         * 点击跳转
         */
        $(".list").delegate('.merchant', 'click', function () {
            var merchantId = $(this).attr('data-id');
            window.location.href = "<?php echo getUrl('product/merchant?merchant_id=')?>"+merchantId
        });
    });
</script>
</html>